<%--<%@ page contentType="text/html;charset=UTF-8" language="java" %>--%>
<%--<!DOCTYPE html>--%>
<%--<html>--%>
<%--<head>--%>
<%--  <title>登录界面</title>--%>
<%--  <meta charset="UTF-8">--%>
<%--  <meta name="viewport" content="width=device-width, initial-scale=1.0">--%>
<%--&lt;%&ndash;  <!-- 引入 Bootstrap -->&ndash;%&gt;--%>
<%--  &lt;%&ndash;  <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>&ndash;%&gt;--%>
<%--  &lt;%&ndash;  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">&ndash;%&gt;--%>
<%--  &lt;%&ndash;  <!-- 引入 font-awesome -->&ndash;%&gt;--%>
<%--  &lt;%&ndash;  <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">&ndash;%&gt;--%>
<%--  &lt;%&ndash;  <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>&ndash;%&gt;--%>
<%--  <!-- jQuery 3.7.1 -->--%>
<%--  <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>--%>

<%--  <!-- Bootstrap 5.3.3 -->--%>
<%--  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">--%>
<%--  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>--%>

<%--  <!-- Font Awesome 6.5.1 -->--%>
<%--  <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.1/css/all.min.css" rel="stylesheet">--%>

<%--  <style>--%>
<%--    body {--%>
<%--      background-image: url('img/img.png');--%>
<%--      background-size: cover; /* 拉伸图片填满容器，可能裁剪边缘 */--%>
<%--    }--%>
<%--    .login-box {--%>
<%--      background: rgba(255, 255, 255, 0.9);--%>
<%--      padding: 30px;--%>
<%--      border-radius: 8px;--%>
<%--      margin-top: 100px;--%>
<%--      box-shadow: 0 0 10px rgba(0,0,0,0.3);--%>
<%--    }--%>

<%--    .form-title {--%>
<%--      text-align: center;--%>
<%--      margin-bottom: 20px;--%>
<%--    }--%>

<%--    .captcha-img {--%>
<%--      cursor: pointer;--%>
<%--      height: 34px;--%>
<%--      vertical-align: middle;--%>
<%--      margin-left: 10px;--%>
<%--    }--%>

<%--    .error-msg {--%>
<%--      color: red;--%>
<%--      font-size: 13px;--%>
<%--      margin-left: 5px;--%>
<%--    }--%>

<%--  </style>--%>
<%--</head>--%>
<%--<body>--%>
<%--<div class="container">--%>
<%--  <div class="row justify-content-center">--%>
<%--    <div class="col-md-6 col-md-offset-3 login-box">--%>
<%--      <form id="login_form" action="<%= request.getContextPath() %>/account?method=login" method="post">--%>
<%--        <h3 class="form-title">用户登录</h3>--%>

<%--        <div class="form-group">--%>
<%--          <i class="fa fa-user fa-lg"></i>--%>
<%--          <input class="form-control" required placeholder="请输入用户名" type="text" name="username" />--%>
<%--          <span class="error-msg">${usernameError}</span>--%>
<%--        </div>--%>

<%--        <div class="form-group">--%>
<%--          <i class="fa fa-lock fa-lg"></i>--%>
<%--          <input class="form-control" required placeholder="请输入密码" type="password" name="password" />--%>
<%--          <span class="error-msg">${passwordError}</span>--%>
<%--        </div>--%>

<%--        <div class="form-group">--%>
<%--          <i class="fa fa-shield fa-lg"></i>--%>
<%--          <input class="form-control" required placeholder="请输入验证码" type="text" name="captcha" style="width: 60%; display: inline-block;" />--%>
<%--          <img src="<%= request.getContextPath() %>/captcha" alt="验证码" class="captcha-img" onclick="this.src='<%= request.getContextPath() %>/captcha?d=' + Math.random();" title="点击刷新验证码"/>--%>
<%--          <span class="error-msg">${captchaError}</span>--%>
<%--        </div>--%>

<%--        <div class="form-group">--%>
<%--          <label class="radio-inline">--%>
<%--            <input type="radio" name="type" checked value="systemAdmin"> 系统管理员--%>
<%--          </label>--%>
<%--          <label class="radio-inline">--%>
<%--            <input type="radio" name="type" value="dormitoryAdmin"> 宿舍管理员--%>
<%--          </label>--%>
<%--        </div>--%>

<%--        <div class="form-group text-right">--%>
<%--          <button type="submit" class="btn btn-success">登录</button>--%>
<%--          <button type="reset" class="btn btn-default">重置</button>--%>
<%--        </div>--%>
<%--      </form>--%>
<%--    </div>--%>
<%--  </div>--%>
<%--</div>--%>
<%--</body>--%>
<%--</html>--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
  <title>登录界面</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- jQuery 3.7.1 -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>

  <!-- Bootstrap 5.3.3 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

  <!-- Font Awesome 6.5.1 -->
  <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.1/css/all.min.css" rel="stylesheet">

  <style>
    body {
      background-image: url('img/img.png');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      height: 100vh;
    }

    .login-box {
      background: rgba(255, 255, 255, 0.95);
      padding: 30px;
      border-radius: 10px;
      margin-top: 100px;
      box-shadow: 0 0 10px rgba(0,0,0,0.3);
    }

    .form-title {
      text-align: center;
      margin-bottom: 25px;
    }

    .captcha-img {
      cursor: pointer;
      height: 38px;
      margin-left: 10px;
    }

    .error-msg {
      color: red;
      font-size: 13px;
      margin-left: 5px;
    }

    .form-icon {
      margin-right: 10px;
      color: #495057;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-6 login-box">
      <form id="login_form" action="<%= request.getContextPath() %>/account?method=login" method="post">
        <h3 class="form-title">用户登录</h3>

        <div class="mb-3 d-flex align-items-center">
          <i class="fas fa-user fa-lg form-icon"></i>
          <input class="form-control" required placeholder="请输入用户名" type="text" name="username" />
        </div>
        <span class="error-msg">${usernameError}</span>

        <div class="mb-3 d-flex align-items-center">
          <i class="fas fa-lock fa-lg form-icon"></i>
          <input class="form-control" required placeholder="请输入密码" type="password" name="password" />
        </div>
        <span class="error-msg">${passwordError}</span>

        <div class="mb-3 d-flex align-items-center">
          <i class="fas fa-shield-alt fa-lg form-icon"></i>
          <input class="form-control" required placeholder="请输入验证码" type="text" name="captcha" style="width: 60%;" />
          <img src="<%= request.getContextPath() %>/captcha" alt="验证码" class="captcha-img" onclick="this.src='<%= request.getContextPath() %>/captcha?d=' + Math.random();" title="点击刷新验证码"/>
        </div>
        <span class="error-msg">${captchaError}</span>

        <div class="mb-3">
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="type" id="adminRadio1" value="systemAdmin" checked>
            <label class="form-check-label" for="adminRadio1">系统管理员</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="type" id="adminRadio2" value="dormitoryAdmin">
            <label class="form-check-label" for="adminRadio2">宿舍管理员</label>
          </div>
        </div>

        <div class="d-flex justify-content-end">
          <button type="submit" class="btn btn-success me-2">登录</button>
          <button type="reset" class="btn btn-secondary">重置</button>
        </div>
      </form>
    </div>
  </div>
</div>
</body>
</html>
